<template>
  <div style="position: relative;padding-top: 20px">
    <div>
      <div class="w1400">
        <div class="play" @click="playVoice">
          <svg
            t="1702495439435"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4425"
            id="mx_n_1702495439435"
            width="20"
            height="20"
          >
            <path
              d="M343.04 839.68H220.16c-73.216 0-133.12-59.904-133.12-133.12V353.28c0-73.216 59.904-133.12 133.12-133.12h122.88c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72H220.16c-39.424 0-71.68 32.256-71.68 71.68v353.28c0 39.424 32.256 71.68 71.68 71.68h122.88c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z"
              fill="#f4ea2a"
              p-id="4426"
            ></path>
            <path
              d="M532.48 950.784c-5.12 0-10.24-1.536-15.36-4.096l-189.44-109.568c-14.848-8.704-19.968-27.136-11.264-41.984 8.704-14.848 27.136-19.968 41.984-11.264l189.44 109.568c14.848 8.704 19.968 27.136 11.264 41.984-5.632 9.728-15.872 15.36-26.624 15.36z"
              fill="#f4ea2a"
              p-id="4427"
            ></path>
            <path
              d="M532.48 942.08c-16.896 0-30.72-13.824-30.72-30.72V193.024L358.4 275.968c-14.848 8.704-33.28 3.584-41.984-11.264-8.704-14.848-3.584-33.28 11.264-41.984l189.44-109.568c9.728-5.632 20.992-5.632 30.72 0 9.728 5.632 15.36 15.872 15.36 26.624V911.36c0 16.896-13.824 30.72-30.72 30.72z"
              fill="#f4ea2a"
              p-id="4428"
            ></path>
            <path
              d="M697.856 866.816c-12.8 0-25.088-8.192-29.184-20.992-5.12-16.384 3.584-33.28 19.456-38.912 110.08-35.84 186.88-149.504 186.88-275.968 0-130.048-79.36-244.224-193.024-278.016-16.384-4.608-25.6-22.016-20.48-38.4 4.608-16.384 22.016-25.6 38.4-20.48C839.68 235.52 936.96 374.272 936.96 530.944c0 152.576-94.208 290.304-229.376 334.336-3.072 1.024-6.144 1.536-9.728 1.536z"
              fill="#f4ea2a"
              p-id="4429"
            ></path>
            <path
              d="M649.728 749.568c-12.8 0-25.088-8.192-29.184-20.992-5.12-16.384 3.584-33.28 19.456-38.912 62.976-20.48 107.008-86.016 107.008-159.232 0-74.752-45.568-140.8-110.592-160.256-16.384-4.608-25.6-22.016-20.48-38.4 4.608-16.384 22.016-25.6 38.4-20.48 91.136 27.136 154.624 117.248 154.624 219.136 0 100.864-59.904 188.416-149.504 217.6-3.584 1.024-6.656 1.536-9.728 1.536z"
              fill="#f4ea2a"
              p-id="4430"
            ></path>
          </svg>
        </div>
        <div style="width: 40%;line-height: 2;font-size: 1rem">
          {{ text }}
        </div>
        <div style="width: 50%;height:100%;display: flex;align-items: center;">
          <video
            controls
            muted
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="true"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            preload="auto"
            style="width: 100%;height: 100%;object-fit:fill;border-radius: 14px"
            autoplay
          >
            <source
              src="https://law.bit.edu.cn/yqw/videos/2023-09/48e94609e7364b03896651e955262efc.mp4"
              type="video/mp4"
            />
          </video>
        </div>
      </div>
    </div>
    <div style="display: flex;margin: 20px;height: 270px;">
      <div style="width: 100%">
        <video
          controls
          muted
          webkit-playsinline="true"
          playsinline="true"
          x-webkit-airplay="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen="true"
          x5-video-orientation="portraint"
          preload="auto"
          style="width: 100%;height: 100%;object-fit:fill"
          autoplay
        >
          <source
            src="https://law.bit.edu.cn/yqw/videos/2023-09/48e94609e7364b03896651e955262efc.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <!-- <div
        style="display: grid;grid-template-columns: auto auto; grid-row-gap: 20px;
  grid-column-gap: 20px;width: 40%;margin-left: 20px;"
      >

      </div> -->
    </div>
    <div style="display:flex;height: 200px;justify-content: center;margin-top: -50px;">
      <router-link to="/gb" style="flex:1;padding:50px 30px;">
          <div class="nav-item">
            校友组织
          </div>
        </router-link>
        <router-link to="/bird" style="flex:1;padding:50px 30px;">
          <div class="nav-item">
            青鸟归巢
          </div>
        </router-link>
        <router-link to="/alumnus" style="flex:1;padding:50px 30px;">
          <div class="nav-item">
            校友信息
          </div>
        </router-link>
        <router-link to="/message" style="flex:1;padding:50px 30px;">
          <div class="nav-item">
            校友印记
          </div>
        </router-link>
    </div>
<!--    <div class="ccc">-->
<!--      <MyBottom style=""></MyBottom>-->
<!--    </div>-->
<!--    <div style="position: sticky;top: 0;z-index: 99">-->
<!--      <Myheader></Myheader>-->
<!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import { getIndexData } from "@/api";

const synth = window.speechSynthesis; // 启用文本
const msg = new SpeechSynthesisUtterance();

export default {
  name: "index",
  components: { MyBottom, Myheader },
  data() {
    return {
      lookList: [
        {
          img: "",
          title: ""
        }
      ],
      text:"北京理工大学1994年创办法学本科教育, 2008年正式成立法学院。北京理工大学法学院坚持“法律+科技”的培养模式，致力于培养高层次、复合型的法律人才，现已形成法学本科、双学位、法学一级学科硕士学位、法律硕士专业学位及法学一级学科博士学位授权比较完整的人才培养体系。"
    };
  },
  methods: {
    playVoice() {
      this.handleSpeak(this.text); // 传入需要播放的文字
    },
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text; // 内容
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 1; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg); // 取消该次语音播放
    }
  },
  async mounted() {
    try {
      const { data } = await getIndexData();
      console.log("data: ", data);
    } catch (error) {
      console.log("error: ", error);
    }
  }
};
</script>

<style scoped>

a {
  text-decoration: none;
  color: #000000;
}

.nav-item {
  width: 100%;
  font-size: 1.5em;
  font-family: "STKaiti", Helvetica, Arial, sans-serif;
  height: 100%;
  background-color: #93171f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.l-title:after {
  position: absolute;
  content: "";
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background-color: #93171f;
}

.play {
  position: absolute;
  top: 1.2rem;
  left: 2rem;
  cursor: pointer;
}

.w1400 {
  position: relative;
  color: #ffffff;
  //margin: 20px 20px;
  margin: 0 20px 20px;
  padding: 40px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #93171f;
}
.ccc{
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
